<template>
	<div class="Thewallet">
		<div class="thewallet-title">
			<div class="total">4个</div>
			<div class="memberLevel" v-if='memberLevel'>
				<i class="iconfont">&#xe619;</i>&emsp; {{memberLevel}}
			</div>
			<div class="memberLevel" v-else='memberLevel'>
				<i class="iconfont">&#xe619;</i>&emsp; 非会员
			</div>
			<div class="Thewallet-title-box">
			<div>
				<h3>当日KBC成交价</h3>
				<p>{{tradePrice}}</p>
			</div>
			<div class="last-title">
				<h3>团队总持币数</h3>
				<p>{{teamMoneyTotal}}</p>
			</div>
		</div>
		</div>
		<div class="thewallet-content">
			<div class="thewallet-item" v-on:click='go("/kbc/h5/TotalWallet",1)'>
			    <div class="thewallet-item-icon">
			    	<i class="iconfont" style="font-size: 1.8rem;padding:0.8rem;background-color:#FFC107;color: #FFFFFF;border-radius: 8px;">&#xe67f;</i>
			    </div>
			    <div class="thewallet-item-text">
			    	<p>交易钱包：<font class="red">{{walletTotal}}</font>&nbsp;K币</p>
			    	<p style="color: #CECECE;">冻结资金：<font class="red">{{frozenMoney}}</font>&nbsp;K币</p>
			    </div>
			    <div class="thewallet-item-icon-right">
			    	<i class="iconfont">&#xe655;</i>
			    </div>
			</div>
			<div class="thewallet-item" v-on:click='go("/kbc/h5/TotalWallet",2)'>
			    <div class="thewallet-item-icon">
			    	<i class="iconfont" style="font-size: 1.8rem;padding:0.8rem;background-color:#DF5000;color: #FFFFFF;border-radius: 8px;">&#xe60e;</i>
			    </div>
			    <div class="thewallet-item-text">
			    	<p>流通钱包：<font class="red">{{walletTrans}}</font>&nbsp;K币</p>
			    </div>
			    <div class="thewallet-item-icon-right">
			    	<i class="iconfont">&#xe655;</i>
			    </div>
			</div>
			<div class="thewallet-item" v-on:click='go("/kbc/h5/TotalWallet",3)'>
			    <div class="thewallet-item-icon">
			    	<i class="iconfont" style="font-size: 1.8rem;padding:0.8rem;background-color:#00CC66;color: #FFFFFF;border-radius: 8px;">&#xe60c;</i>
			    </div>
			    <div class="thewallet-item-text">
			    	<p>生息钱包：<font class="red">{{walletIncrease}}</font>&nbsp;K币</p>
			    </div>
			    <div class="thewallet-item-icon-right">
			    	<i class="iconfont">&#xe655;</i>
			    </div>
			</div>
			<div class="thewallet-item" v-on:click='go("/kbc/h5/TotalWallet",4)'>
			    <div class="thewallet-item-icon">
			    	<i class="iconfont" style="font-size: 1.8rem;padding:0.8rem;background-color:#D44950;color: #FFFFFF;border-radius: 8px;">&#xe60b;</i>
			    </div>
			    <div class="thewallet-item-text">
			    	<p>奖励钱包：<font class="red">{{walletPrise}}</font>&nbsp;K积分</p>
			    </div>
			    <div class="thewallet-item-icon-right">
			    	<i class="iconfont">&#xe655;</i>
			    </div>
			</div>
		</div>
			<!--设置交易密码-->
			<modal v-if="showModal">
				<h3 slot="header">输入交易密码</h3>
				<template slot="closeicon">
					<span class="modal-header-stop" v-on:click="close">
            	<i class="iconfont">&#xe610;</i>
            </span>
				</template>
				<div slot="body" class="passwordTrading">
					<input type="password" minlength="6" :placeholder="message" v-model="passwordTrading" />
					<div class="red">
						{{pointOut}}
					</div>
				</div>
				<div slot="footer">
					<div class="thewallet-cancel" v-on:click="close">取消</div>
					<div class="thewallet-confirm" v-on:click="confirm">确定</div>
				</div>
			</modal>

			<!--输入交易密码-->
			<modal v-if="setShowModal">
				<h3 slot="header">设置交易密码</h3>
				<template slot="closeicon">
					<span class="modal-header-stop" v-on:click="close">
            	<i class="iconfont">&#xe610;</i>
            </span>
				</template>
				<div slot="body" class="passwordTrading">
					<input type="password" minlength="6" :placeholder="message" v-model="passwordTrading" />
					<input type="password" minlength="6" :placeholder="message" v-model="passwordTrading2" />
					<div class="red">
						{{pointOut}}
					</div>
					</mt-field>
				</div>
				<div slot="footer">
					<div class="thewallet-cancel" v-on:click="close">取消</div>
					<div class="thewallet-confirm" v-on:click="setConfirm">确定</div>
				</div>
			</modal>
	</div>
</template>
<style>
	.Thewallet {
		width: 100%;
		padding-bottom: 5rem;
	}
	
	.Thewallet .thewallet-title {
		position: fixed;
		box-sizing: border-box;
		padding: 2rem 0 0 0;
		z-index: 999;
		text-align: center;
		width: 100%;
		margin: 0 auto;
		background: #4e8bfe;
		color: #FFFFFF;
	}
	.Thewallet .thewallet-title .memberLevel {
		margin: 1rem 0;
		font-size: 1.2rem;
	}
	
	.Thewallet .thewallet-title .total {
		width: 8rem;
		height: 8rem;
		margin: 0 auto 1rem;
		line-height: 8rem;
		font-size: 2rem;
		border-radius: 50%;
		color: #FFFFFF;
		border: 1px solid #FFFFFF;
	}
	.Thewallet .thewallet-content{position: relative;overflow-y: scroll;top:19.5rem;margin-bottom: 4rem;}
	.Thewallet .thewallet-content .mint-cell:before {
		content: " ";
		position: absolute;
		top: 2.1rem;
		right: 15px;
		display: block;
		width: 10px;
		height: 10px;
		border-top: 1px solid #d9d9d9;
		border-right: 1px solid #d9d9d9;
		transform: rotate(45deg);
	}
	
	.Thewallet .Thewallet-title-box {
		display: flex;
		color: #FFFFFF;
		width: 100%;
		box-sizing: border-box;
		padding: 0.2rem;
		border-top: 1px solid #eee;
		background: #4e8bfe;
		/*background-color: #BF0A0B;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;*/
	}
	
	.Thewallet .Thewallet-title-box>div {
		width: 50%;
		text-align: center;
		display: block;
		box-sizing: border-box;
		line-height: 2.3rem;
	}
	
	.Thewallet .Thewallet-title-box>div h3 {
		font-size: 1.3rem;
	}
	
	.Thewallet .Thewallet-title-box>div p {
		color: #bf0a0b;
		font-size: 1.3rem;
	}
	
	.Thewallet .Thewallet-title-box .last-title:before {
		content: " ";
		position: absolute;
		top: 14.8rem;
		left: 50%;
		display: block;
		width: 1px;
		height: 35px;
		border-left: 1px solid #d9d9d9;
	}
	.passwordTrading {
		padding: 1rem 1rem 0;
		width: 100%;
		box-sizing: border-box;
	}
	
	.passwordTrading input {
		padding: 1rem;
		border: 1px solid #eee;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 1rem;
	}
	
	.thewallet-cancel,
	.thewallet-confirm {
		width: 50%;
		display: inline-block;
		text-align: center;
		float: left;
		box-sizing: border-box;
		border-top: 1px solid #eee;
		padding: 20px 0;
		font-size: 1.4rem;
	}
	
	.thewallet-cancel:active,
	.thewallet-confirm:active {
		width: 50%;
		display: inline-block;
		text-align: center;
		float: left;
		box-sizing: border-box;
		border-top: 1px solid #eee;
		padding: 20px 0;
		font-size: 1.4rem;
		color: #FFFFFF;
		background: #CECECE;
	}
	
	.thewallet-confirm {
		border-left: 1px solid #eee;
	}
	.Thewallet .thewallet-item {
		background-image: -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), color-stop(50%, #d9d9d9), color-stop(50%, transparent));
		background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
		background-repeat: no-repeat;
		background-position: top left;
		background-origin: content-box;
		-webkit-box-align: center;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		display: table;
		font-size: 16px;
		min-height: inherit;
		overflow: hidden;
		padding: 0 10px;
		width: 100%;
		background: #FFFFFF;
		min-height: 60px;
		margin-bottom: 5px;
		border-bottom: 1px solid #FFFDEF;
		border-top: 1px solid #FFFDEF;
	}
	.Thewallet .thewallet-item .thewallet-item-icon{display: table-cell;vertical-align: middle;}
	.Thewallet .thewallet-item .thewallet-item-text{display: table-cell;width: 78%;vertical-align: middle;}
	.Thewallet .thewallet-item .thewallet-item-icon-right{display: table-cell;vertical-align: middle;text-align: right;}
  	.Thewallet .thewallet-item p{margin: 8px 0;}
</style>
<script>
	import util from './../../js/util/util.js';
	import router from './../../router';
	import modal from '@/components/modal';
	import { Cell, MessageBox, Toast } from 'mint-ui';
	export default {
		data() {
			return {
				time: 60, // 发送验证码倒计时
				verifyCode: '',
				user: '',
				pointOut: '',
				isShow: true,
				showModal: false,
				setShowModal: false,
				//				showLoadModal:true, //loading
				message: '输入交易密码',
				passwordTrading: '',
				passwordTrading2: '',
				sendMsgDisabled: false,
				reg: /^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/, //手机验证码
				tradePrice: '0',
				teamMoneyTotal: '0.0',
				walletTotal: '0.0',
				walletIncrease: '0.0',
				walletPrise: '0.0',
				walletTrans: '0.0',
				frozenMoney: '0.0',
				memberLevel: ''
			}
		},
		created() {
			let $this = this;
			this.$store.state.headings = this.$router.history.current.name; //修改标题
			this.$store.state.isFooterShow = true; //显示底部导航
			this.$store.state.flag = 2;
		},
		components: {
			modal,
			Cell
		},
		methods: {
			go: function(url,type) {
				util.pushRouter(router, url, {"type":type});
			},
			close: function() { //取消
				this.showModal = false;
				util.pushRouter(router, "/kbc/h5/home", {});
			},
			confirm: function() {
				let $this = this;
				if($this.passwordTrading.length > 6) {
					util.pushRouter(router, "/kbc/h5/home", {});
				} else {
					util.Ajax('/kbc/checkTradePass', "GET", {
						"tradePass": $this.passwordTrading
					}, function(data) { //加载头部数
						if(data.code != 0) {
							$this.pointOut = data.msg
						} else {
							$this.walletInfo();
							var time = new Date().getTime();
							util.setCookie("codeName", data.memberId + '-' + time); //设置COOKIE
						}
					})
				}
			},
			setConfirm: function() { //设置交易密码
				let $this = this;
				if($this.passwordTrading.length < 6) {
					$this.pointOut = "新交易密码不能为空！"
					return false;
				}
				if($this.passwordTrading2.length < 6) {
					$this.pointOut = "确认交易密码不能为空！"
					return false;
				}
				if($this.passwordTrading != $this.passwordTrading2) {
					$this.pointOut = "新交易密码与确认交易密码不一致！"
					return false;
				} else {
					$this.pointOut = ""
					util.Ajax('/kbc/setTradePass', "GET", {
						"tradePass": $this.passwordTrading2
					}, function(data) { //加载头部数
						if(data.code == 0) {
							Toast(data.msg)
							$this.setShowModal = false;
							util.setCookie("codeName", data.code)
						} else {
							$this.isShow = true;
							util.setCookie("codeName", data.code)
						}
					})
				}
			},
			walletInfo: function() { //获取钱包信息
				let $this = this;
				//显示数据
				util.Ajax('/kbc/walletInfo', "GET", {}, function(data) {
					$this.isShow = true;
					$this.showModal = false;
					//					$this.showLoadModal = false;
					$this.setShowModal = false;
					$this.user = data;
					$this.memberLevel = data.memberLevel;
					$this.tradePrice = data.walletMap.tradePrice;
					$this.teamMoneyTotal = data.walletMap.teamMoneyTotal;
					$this.walletTotal = data.walletMap.wallet.walletTotal;
					$this.walletIncrease = data.walletMap.wallet.walletIncrease;
					$this.walletPrise = data.walletMap.wallet.walletPrise;
					$this.walletTrans = data.walletMap.wallet.walletTrans;
					$this.frozenMoney = data.walletMap.wallet.frozenMoney;
				})
			}
		},
		mounted: function() { //加载完成后执行
			let codeName = util.getCookie("codeName");
			let $this = this;
			//			$this.showLoadModal = false; //禁止点击页面
			if(util.isEmpty(codeName)) { //已设置交易密码
				util.Ajax('/kbc/memberInfo', "POST", {}, function(data) { //获会员信息
					if(data) {
						if(data.code == "0") { //查看交易密码
							if(data.hasTradePass == '0') {
								$this.showModal = true //提交
							} else {
								$this.setShowModal = true //设置
							}
						} else {
							Toast(data.msg);
						}
					}
				})

			}else {
				$this.walletInfo();
			}
		}
	}
</script>
